<template>
  <div id="user">
    <a-layout-header>
      <a-form layout="inline" :form="form">
        <a-form-item>
          <a-input placeholder="输入公告类型" v-model="pagination.userName" @keyup.enter="getUserList('status')"></a-input>
        </a-form-item>
        <!-- <a-form-item>
          <a-input placeholder="手机号" v-model="pagination.phone" @keyup.enter="getUserList('status')"></a-input>
        </a-form-item> -->
        <a-form-item>
        <a-select
         style="width: 160px"
          placeholder="请选择公告对象"
          :allowClear="true"
          showSearch
          :filterOption="filterOption"
          @change="roleSearchChange"
         v-decorator="['role']"
          class="selectWidth"
        >
          <a-select-option
            v-for="item of rolesList"
            :key="item.id"
            :value="item.id"
          >{{ item.name }}</a-select-option>
        </a-select>
      </a-form-item>
        <a-form-item>
          <a-button type="primary" icon="search" @click="getUserList('status')">搜索</a-button>
        </a-form-item>
        <a-form-item>
          <a-button icon="sync" @click="initPage">重置</a-button>
        </a-form-item>
        <a-form-item class="fright">
          <!-- <a-button type="primary" icon="plus" v-permission:role="['userAdd']" @click="addUser">新增</a-button> -->
          <a-button type="primary" icon="plus" @click="addUser">新增</a-button>
        </a-form-item>
      </a-form>
    </a-layout-header>
    <a-layout-content>
      <a-table
        :columns="columns"
        :dataSource="dataTable"
        :rowKey="record => record.createTime"
        :loading="loading"
        :pagination="false"
        bordered>
        <template slot="roles" slot-scope="text, record">
          <a-tag
            color="rgb(135, 208, 104)"
          >{{ record.role.name }}</a-tag>
        </template>
        <template slot="username" slot-scope="text, record">
          <a-popover placement="topLeft">
            <template slot="content">
              <p>{{ record.username }}</p>
            </template>
            <p class="ellipsi">
              {{ record.username }}
            </p>
          </a-popover>
        </template>
        <template slot="action" slot-scope="text, record">
          <!-- <a-tag color="#933dfe" v-permission:role="['userUpdate']" @click="editUser(record)">编辑</a-tag> -->
          <a-tag color="#933dfe" >发送</a-tag>
          <a-tag color="#933dfe" @click="editDialog">编辑</a-tag>
          <!-- <a-tag color="#933dfe" @click="editUser(record)">编辑</a-tag> -->
          <a-tag color="#f50" @click="deleteUser(record)">删除</a-tag>
        </template>
      </a-table>
    </a-layout-content>
    <a-layout-footer>
      <a-pagination
        :pageSizeOptions="pageSizeOptions"
        :total="totalPage"
        :showTotal="total=>`总共${total}条`"
        :current="pagination.pageNumber"
        showSizeChanger
        showQuickJumper
        @change="paginationChange"
        @showSizeChange="onShowSizeChange"
      ></a-pagination>
    </a-layout-footer>
    <modalWin
      :visible="visible"
      :confirmLoading="confirmLoading"
      :title="title"
      :userId="userId"
      :rolesList="rolesList"
      @addAction="addAction"
      @addCancel="addCancel"
    ></modalWin>


    <!-- 编辑弹窗 -->
   <a-modal
      width ="800px"
      title="编辑公告内容"
      :visible="editDialogShow"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <editor></editor>
    </a-modal>
  </div>
</template>

<script>
import * as API from "../../api/user";
import modalWin from "./commponent/editUser.vue";

import editor from "../../commonComponents/editor/editor.vue"
export default {
  name: "user",
  components: {
    modalWin,
    editor
  },
  data() {
    return {
      ModalText: 'Content of the modal',
      // confirmLoading: false,
      editDialogShow:false,
      form: this.$form.createForm(this),
      pageSizeOptions: ["10", "20", "50"],
      totalPage: undefined,
      pagination: {
        pageNumber: 1,
        pageSize: 10,
        // blurry: '',
        userName: '',
        phone: null,
        roleId: null
      },
      rolesList: [],
      visible: false,
      confirmLoading: false,
      title: "新增",
      userId: null,
      loading: false,
      columns: [
        {
          title: "公告类型",
          dataIndex: "username",
          width: "9%",
          align: "center",
          scopedSlots: { customRender: "username" }
        },
        {
          title: "公告标题",
          dataIndex: "phone",
          width: "6%",
          align: "center",
          scopedSlots: { customRender: "phone" }
        },
        {
          title: "公告对象",
          dataIndex: "nickName",
          width: "6%",
          align: "center",
          scopedSlots: { customRender: "nickName" }
        },
        // {
        //   title: "创建人",
        //   dataIndex: "createBy",
        //   width: "6%",
        //   align: "center",
        //   scopedSlots: { customRender: "createBy" }
        // },
        // {
        //   title: "创建时间",
        //   dataIndex: "createTime",
        //   width: "14%",
        //   align: "center",
        //   scopedSlots: { customRender: "createTime" }
        // },
        // {
        //   title: "所属角色",
        //   dataIndex: "roles",
        //   width: "6%",
        //   align: "center",
        //   scopedSlots: { customRender: "roles" }
        // },
        {
          title: "操作",
          dataIndex: "action",
          width: "9%",
          align: "center",
          scopedSlots: { customRender: "action" }
        }
      ],
      dataTable: [
      ]
    };
  },
  mounted() {
    this.getUserList()
    this.getRolesList();
  },
  activated() {},
  methods: {
     handleOk(e) {
      this.confirmLoading = true;
      setTimeout(() => {
        this.editDialogShow = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel(e) {
      console.log('Clicked cancel button');
      this.editDialogShow = false;
    },
    editDialog(){
      this.editDialogShow = true
    },
    
    getUserList(status) {
      // let userId = this.userInfo.roles[0].id
      if (status === 'status') {
        this.pagination.pageNumber = 1
      }
      this.loading = true
      API.getUser(this.pagination).then(res => {
        if (res.code === 200) {
          this.dataTable = res.data.records;
          this.totalPage = res.data.total
        }
        this.loading = false
      })
    },
    getRolesList() {
      let postBody = { pageSize: 1000, pageNumber: 1 }
      API.getRoles(postBody).then(res => {
        if (res.code === 200) {
          this.rolesList = res.data.records;
          // console.log(this.rolesList)
        }
      });
    },
    roleSearchChange (value) {
      this.pagination.roleId = value
      this.getUserList('status')
    },
    onShowSizeChange(value, pageSize) {
      this.pagination.pageNumber = 1;
      this.pagination.pageSize = pageSize;
      this.getUserList();
    },
    paginationChange(value) {
      this.pagination.pageNumber = value;
      this.getUserList();
    },
    initPage () {
      this.pagination.pageNumber = 1
      this.pagination.pageSize = 10
      this.pagination.userName = ''
      this.pagination.phone = null
      this.pagination.roleId = undefined
      this.form.setFieldsValue({
        role: undefined
      });
      this.getUserList();
    },
    editUser(record) {
      this.title = "编辑";
      this.visible = true;
      this.userId = record.id;
    },
    deleteUser(record) {
      let that = this 
      this.$confirm({ 
        okText: '确定', 
        cancelText: '取消', 
        title: '', 
        content: '确定进行删除操作？', 
        onOk () { 
          let arr = []
          arr.push(record.id)
          API.delUser (arr).then(res => {
            if (res.code === 200) {
              that.$message.destroy();
              that.$message.success('删除成功') 
              that.getUserList() 
            }
          }) 
        }, 
        onCancel () {} 
      })

    },
    addUser() {
      this.initUserEdit();
      this.visible = true;
      this.userId = null
    },
    initUserEdit() {
      this.title = "新增";
      this.userId = undefined;
    },
    addAction(postUserData) {
      this.confirmLoading = true;
      this.userId ? this.editUserSubmit(postUserData) : this.addUserSubmit(postUserData)
    },
    addUserSubmit(postUserData) {
      API.addUser(postUserData).then(res => {
        if (res.code === 200) {
          this.$message.destroy();
          this.$message.success("用户添加成功");
          this.initUserEdit()
          this.getUserList();
          this.visible = false;
        }
        this.confirmLoading = false;
      }).catch(()=>{
        this.confirmLoading = false;
      })
    },
    editUserSubmit(postUserData) {
      API.editUser(this.userId, postUserData).then(res => {
        if (res.code === 200) {
          this.$message.destroy();
          this.$message.success("用户修改成功");
          this.initUserEdit()
          this.getUserList();
        }
        this.confirmLoading = false;
        this.visible = false;
      }).catch(()=>{
        this.confirmLoading = false;
        this.visible = false;
      })
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    addCancel() {
      this.visible = false;
      this.userId = undefined
    },
    toBindMenu() {
      this.$router.push({
        path: "/configGroup",
        key: new Date()
      });
    }
  }
};
</script>

<style lang="less" scoped>
.selectWidth {
  width: 140px;
}
</style>